import { Button, Modal } from 'antd';
import React, { useRef, useState } from 'react';
import { connect, history } from 'umi';
import './../index.less';
// 图片
// import bgNoType1 from '@/assets/image/docList-no-type1.png';
// import bgNoType4 from '@/assets/image/docList-no-type4.png';
// import bgNoType5 from '@/assets/image/docList-no-type5.png';
// import bgType1 from '@/assets/image/docList-type1.png';
// import bgType2 from '@/assets/image/docList-type2.png';
// import bgType3 from '@/assets/image/docList-type3.png';
// import bgType4 from '@/assets/image/docList-type4.png';
// import bgType5 from '@/assets/image/docList-type5.png';
import zyxz from '@/assets/image/docList-zyxz.png';

const DocType: React.FC = (props: any) => {
  const [isDemoOpen, setIsDemoOpen] = useState(false);
  const [currentDemo, setCurrentDemo] = useState<any>(null); //当前示例
  // const bgTypeList = [bgType1, bgType2, bgType3, bgType4, bgType5]; //背景图列表 与公文列表里的frontend_code对应
  // const bgTypeNoClickList = [bgNoType1, null, null, bgNoType4, bgNoType5]; //不能点击的背景图列表 与公文列表里的frontend_code对应
  const { docTypeList, expandBgColor } = props;
  const bgTypeList2 = ['', '', '#7DAB80', '', '', '#BA99D7', '#D7B27B', '#5769BB', '#5A86D6'];
  //根据type匹配背景图片或者图片
  const findBG = (item: any) => {
    let noClickBtnColor = '#C6C6C6'; //不能点击的按钮颜色
    const bgColorIndex = item.frontend_code - 1;
    const bgStyle: any = {};
    //可以点击
    if (item.enabled) {
      //索引存在 代表有对应的背景图和按钮颜色
      if (bgTypeList2[bgColorIndex]) {
        bgStyle.color = bgTypeList2[bgColorIndex];
        bgStyle.backgroundColor = bgTypeList2[bgColorIndex];
        // bgStyle.backgroundImage = `url(${bgTypeList[bgColorIndex]})`;
      } else if (item.display_name === '自由写作') {
        bgStyle.backgroundImage = `url(${zyxz})`;
      } else {
        const expandBgColorIndex = (bgColorIndex - 1) % expandBgColor.length; //轮流显示拓展的颜色
        bgStyle.color = expandBgColor[expandBgColorIndex];
        bgStyle.backgroundColor = expandBgColor[expandBgColorIndex];
      }
    } else {
      //不能点击
      bgStyle.color = noClickBtnColor;
      bgStyle.backgroundColor = noClickBtnColor;
    }
    return bgStyle;
  };

  //关闭示例
  const demoModalCancel = () => {
    setIsDemoOpen(false);
  };
  const articleElement = useRef<any>(null);
  //显示示例
  const showDemo = (event: any, item: any) => {
    event.stopPropagation(); //阻止冒泡
    setIsDemoOpen(true);
    //将\n替换成p标签包裹文字
    item.article = item.example
      .split('\n')
      .map((paragraph: any) => `<p>${paragraph}</p>`)
      .join('');
    articleElement.current = React.createElement('div', {
      dangerouslySetInnerHTML: { __html: item.article },
    });
    setCurrentDemo(item);
    //冒泡阻止点击事件
  };
  //创建新的写作页面
  const createDoc = (event: any, item: any) => {
    event.stopPropagation(); //阻止冒泡
    if (!item) return;
    if (!item.enabled) return; //置灰 点击无反应

    if (item.name !== '自由写作') {
      //将数据保存到model里 让conversationInit获取到
      props.dispatch({
        type: 'writingTypeModel/updateWritingType',
        payload: item,
      });

      history.push({
        pathname: `/conversationInit`,
      });
    } else {
      history.push({
        pathname: `/highClassWrite?type_name=${item.display_name}&writing_type_id=${item.id}`,
      });
    }
  };
  // const goChatBot = (type: number) => {
  //   history.push(`/chatBot?type=${type}`);
  // };
  return (
    <div className="docTypeBox">
      <div className="docHeader">模板写作</div>
      <div className="docTypeListBox">
        {docTypeList.map((item: any, index: number) => {
          let itemStyle = findBG(item);
          if (item.show) {
            return (
              <div
                className="docTypeList"
                key={index}
                onClick={(event) => createDoc(event, item)}
                style={itemStyle}
              >
                <div className="docTypeInfo">
                  <div className="docTypeTitle">{item.name}</div>
                  <div className="docTypeDesc">{item.type_instruction}</div>
                  <div className="docTypeDemo">
                    {item.name !== '自由写作' && (
                      <Button
                        size="small"
                        onClick={(event) => showDemo(event, item)}
                        style={{ color: itemStyle.color }}
                      >
                        示例
                      </Button>
                    )}
                  </div>
                </div>
              </div>
            );
          }
          return null;
        })}

        {/* <div className="docTypeList" onClick={() => goChatBot(9)}>
          <div className="docTypeInfo">
            <div className="docTypeTitle">自由写作</div>
            <div className="docTypeDesc">
              无格式限制创作空间，以对话方式引导，助力您在创作过程中获得自由灵感，展现创意
            </div>
          </div>
        </div> */}
      </div>
      <Modal
        centered
        className="demoModal"
        title={currentDemo?.example_title}
        open={isDemoOpen}
        footer={null}
        onCancel={demoModalCancel}
        width={650}
      >
        {articleElement.current}
      </Modal>
    </div>
  );
};
export default connect(({ writingTypeModel }) => ({ writingTypeModel }))(DocType);
